@support

支援度:Can I Use

在開始探討CSS新屬性前,一定要先了解CSS新屬性的支援度。

如果是在專案剛開始，可以看Can I Use查詢瀏覽器支援度，再根據瀏覽器支援狀況決定是否要使用CSS屬性；但是如果已經完成專案大部分，在驗收時發現就是只有某些少數瀏覽器不支援，大部分瀏覽器都支援，這時就可以使用 @supports進行例外處理。

@supports at-rule由一組樣式聲明和支持條件構成；
支持條件是由一個或多個邏輯條件組成，可使用and、or、not

支援display:grid的情況下:

@supports (display:grid){
    display:grid;
}

不支援display:grid的情況下:

@supports not (display:grid){
    float:left;
}

支援display:grid 和 grid-template-columns: subgrid的情況下:

@supports (display:grid) and (grid-template-columns: subgrid){
    ...
}

支援display:grid 或 grid-template-columns: subgrid的情況下:

@supports (display:grid) or (grid-template-columns: subgrid){
    ...
}

支援transform-origin: 5% 5%的情況下:

@supports (transform-origin: 5% 5%){
    /* 上方表達式如果為真則會返回true,就會接續執行下方css */
    ...
}

支援子選擇器 的情況下:

@supports (selector A > B){
    ...
}

參考來源

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports